<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 个人轨迹 - </title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <form class="form-horizontal m-t-xl" method="post" action="/trackByDate">
                                <input type="hidden" id="diseaseId" name="diseaseId"/>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">日期范围：</label>
                                    <div class="col-sm-8">
                                        <input placeholder="开始日期" type="date" class="form-control layer-date" name="start">
                                        <input placeholder="结束日期" type="date" class="form-control layer-date" name="end">
                                    </div>
                                    <div class="col-sm-2">
                                        <button class="btn btn-primary pull-left m-t-n-xs" type="submit">确认</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div  style="width:2000px;height:800px;border:1px solid gray" id="container"></div>

<script src="./echarts/echarts.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script th:inline="javascript">
    window.onload = function(){
        var map = new BMap.Map("container");
        var mapStyle ={
            features: ["road","building","water","land"],//隐藏地图上的"poi",
            style : "dark",}
        map.setMapStyle(mapStyle);
        map.centerAndZoom(new BMap.Point(116.60, 39.87), 12);
        map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
        map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件

        map.clearOverlays();                        //清除地图上所有的覆盖物
        var walking = new BMap.WalkingRoute(map);    //创建步行

        // 坐标点数据
        var pointArr = [[${track}]];
        var diseaseId = [[${diseaseId}]];
        $("#diseaseId").val(diseaseId); //设置
        console.log([[${track}]])
        // 生成坐标点
        for (var person = 0, personNum = pointArr.length; person < personNum; person++) {
            var trackPoint = [];
            for(var loc=0,locNum = pointArr[person].length; loc < locNum; loc++){
                trackPoint.push(new BMap.Point(pointArr[person][loc][0],pointArr[person][loc][1]));
            }
            for (var i = 0; i < trackPoint.length; i++) {
                if(i != trackPoint.length -1 ){
                    walking.search(trackPoint[i], trackPoint[i+1]);
                }
            }
            walking.setSearchCompleteCallback(function(){
                var pts = walking.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组

                var polyline = new BMap.Polyline(pts,{strokeColor:"gold", strokeWeight:8, strokeOpacity:0.5});
                map.addOverlay(polyline);
            });
        }
    }
</script>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>



<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>


<!-- layerDate plugin javascript -->
<script src="js/plugins/layer/laydate/laydate.js"></script>
<script>
    //外部js调用
    laydate({
        elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus' //响应事件。如果没有传入event，则按照默认的click
    });

    //日期范围限制
    var start = {
        elem: '#start',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
</script>
</body>

</html>
